<template>
    <div id="app">
        <div class="add">
            编号：<input type="text" v-model="code">
            品牌名称：<input type="text" v-model="productName">
            <br>
            产品图片地址：<input type="text" v-model="imgSrc">
            价格：<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">

        </div>
        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>
        <div>
            <table class="tb">
                <tr >
                    <th>
                        <input type="checkbox" v-model="allCheck" @change="allCheckChange">全选
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>


                </tr>
                <tr v-for="(item,index) of products" :key="index.id">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img :src="item.imgSrc" width="50" height="50">
                    </td>
                    <td>{{item.code}}</td>
                    <td>{{item.productName}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===1">-</button>&nbsp;{{item.count}}
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>


                </tr>

            </table>
        </div>




        
    </div>
</template>
<script>
// 封装本地存储的方法
let local={
    get(key){
        return JSON.parse(localStorage.getItem(key))
    },
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value))
    }
}
// 初始数据
    let initialData =([
                    {
                        id:1,
                        code:1,
                        imgSrc: 'https://img0.baidu.com/it/u=733966098,1215176277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                        productName:"喜喜",
                        price:90,
                        count:1,
                        cheked:false

                    

                    },
                    {
                        id:2,
                        code:2,
                        imgSrc:'https://img2.baidu.com/it/u=2677130232,3297202898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083',
                        productName:"哈哈",
                        price:70,
                        count:1,
                        cheked:false
                    
                    },
                    {
                        id:3,
                        code:3,
                        imgSrc:'https://img1.baidu.com/it/u=249788639,1059575476&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                        productName:"嘿嘿",
                        price:28,
                        count:1,
                        cheked:false

                    }
                ])



export default{
    data(){
        return{
            allCheck:false,
            code:'',
            productName:"",
            imgSrc:'',
            price:'',
            checks:[],
            products:local.get("aa")??initialData
        }
    },
    watch:{
        // 反选
        checks(number){
            if(number.length===this.products.length){
                this.allCheck=true;
            }else{
                this.allCheck=false
            }
        }
    },
    methods:{
        increase(number){
            number.count++
        },
        decrease(num){
            number.count--
        },
        allCheckChange(){
            if(this.allCheck){
                this.checks=this.products
            }else{
                this.checks=[]
            }
        },
        del(index){
            let target=this.products.splice(index,1)
            local.set("aa",this.products)
            console.log(target)
            this.checks=this.checks.filter(item=>item.id !==target[0].id)

        },
        add(){
            // 非空校验
                if(!this.code||!this.imgSrc||!this.price||!this.productName){
                    return
                }
            let obj={
                id:Math.random().toString(32).substring(2),
                imgSrc:this.imgSrc,
                code:this.code,
                productName:this.productName,
                count:1,
                price:this.price
            }
            this.products.push(obj)
            local.set("aa",this.products)
        }
    }
}

</script>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: pink;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

